<template>
  <div
    class="statistics-card">
    <div
      class="statistics-card--title"
      :style="{
        color: `var(--color-${styleType})`,
      }">
      {{ title }}
    </div>
    <i
      class="statistics-card--icon"
      v-if="icon"
      :class="[icon]">
    </i>
    <div class="statistics-card--value">
      {{ value }}
    </div>
    <!-- <div class="statistics-card--stat" v-if="!rateClose">
      {{ conditionText }} <b>{{ Math.abs(stat) }}</b>%
    </div> -->
  </div>
</template>
<script lang='ts'>

import { computed, defineComponent } from 'vue';
import { UP_DIVIDE_POINT, DOWN_DIVIDE_POINT } from '../utils/config'
export default defineComponent({

  props: {
    title: {
      type: String,
    },
    value: {
      type: String,
    },
    stat: {
      type: Number,
      default: 0,
    },
    rateClose: {
      type: Boolean,
      default: false,
    },
    styleType: {
      type: String,
      default: 'primary',
    },
    icon: {
      type: String,
    }
  },

  setup(props) {


    const condition = computed(() => {
      return props.stat >= 0
        ? 'fa fa-arrow-up'
        : 'fa fa-arrow-down'
    })

    return {
      condition,
      ...props,
    }

  }

})
</script>
<style lang="scss">
.statistics-card {
  position: relative;
  display: flex;
  flex-direction: column;
  word-wrap: break-word;
  background: white;
  background-clip: border-box;
  border-radius: 5px;
  padding: 1.5rem;
  flex: 0 0 50%;
  max-width: 40%;
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;

  &--title {
    display: inline-block;
    font-size: .7rem;
    padding: 0px 10px 0;
  }

  &--icon {
    color: #dddfeb;
    font-size: 40px;
    opacity: 0.3;
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);

  }

  &--value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 5px 0 0 10px;
  }

  &--stat {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 8px;
    margin-top: 25px;
    padding: 10px 10px 0;
  }
}

@media screen and (min-width: 1200px){
  .statistics-card {
    max-width: 19%;
  }
}
@media screen and (max-width: 855px){
  .console-home {
    .statistics-overview {
      display: block !important;
    }
  }
  .statistics-card {
    max-width: 100%;
  }
}
</style>
